package com.campus.help.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 首页控制器
 * 提供系统根路径的访问和重定向
 */
@Controller
public class IndexController {
    
    /**
     * 访问根路径时显示欢迎信息
     * @return 欢迎信息
     */
    @GetMapping({"", "/"})
    @ResponseBody
    public String index() {
        return "<!DOCTYPE html>" +
               "<html lang='zh-CN'>" +
               "<head>" +
               "    <meta charset='UTF-8'>" +
               "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>" +
               "    <title>校园互助系统</title>" +
               "    <style>" +
               "        :root {" +
               "            --primary-color: #4285f4;" +
               "            --secondary-color: #34a853;" +
               "            --accent-color: #fbbc05;" +
               "            --danger-color: #ea4335;" +
               "            --light-color: #f8f9fa;" +
               "            --dark-color: #202124;" +
               "        };" +
               "        * { margin: 0; padding: 0; box-sizing: border-box; }" +
               "        body {" +
               "            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" +
               "            line-height: 1.6;" +
               "            color: var(--dark-color);" +
               "            background-color: #f5f5f5;" +
               "            padding: 0;" +
               "            margin: 0;" +
               "        };" +
               "        .container {" +
               "            max-width: 1200px;" +
               "            margin: 0 auto;" +
               "            padding: 20px;" +
               "        };" +
               "        header {" +

               "            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));" +
               "            color: white;" +
               "            padding: 2rem 0;" +
               "            text-align: center;" +
               "            box-shadow: 0 4px 6px rgba(0,0,0,0.1);" +
               "        }" +
               "        h1 {" +
               "            font-size: 2.5rem;" +
               "            margin-bottom: 0.5rem;" +
               "        }" +
               "        .subtitle {" +
               "            font-size: 1.2rem;" +
               "            opacity: 0.9;" +
               "        }" +
               "        .card-container {" +
               "            display: flex;" +
               "            flex-wrap: wrap;" +
               "            gap: 20px;" +
               "            margin-top: 30px;" +
               "            justify-content: center;" +
               "        }" +
               "        .card {" +
               "            background: white;" +
               "            border-radius: 8px;" +
               "            box-shadow: 0 2px 10px rgba(0,0,0,0.1);" +
               "            padding: 20px;" +
               "            width: 300px;" +
               "            transition: transform 0.3s ease, box-shadow 0.3s ease;" +
               "        }" +
               "        .card:hover {" +
               "            transform: translateY(-5px);" +
               "            box-shadow: 0 5px 15px rgba(0,0,0,0.2);" +
               "        }" +
               "        .card h2 {" +
               "            color: var(--primary-color);" +
               "            margin-bottom: 15px;" +
               "            border-bottom: 2px solid var(--light-color);" +
               "            padding-bottom: 10px;" +
               "        }" +
               "        .card-content {" +
               "            margin-bottom: 15px;" +
               "        }" +
               "        .btn {" +
               "            display: inline-block;" +
               "            background-color: var(--primary-color);" +
               "            color: white;" +
               "            padding: 8px 16px;" +
               "            border-radius: 4px;" +
               "            text-decoration: none;" +
               "            transition: background-color 0.3s ease;" +
               "        }" +
               "        .btn:hover {" +
               "            background-color: #3367d6;" +
               "        }" +
               "        .btn-secondary {" +
               "            background-color: var(--secondary-color);" +
               "        }" +
               "        .btn-secondary:hover {" +
               "            background-color: #2d9047;" +
               "        }" +
               "        .btn-accent {" +
               "            background-color: var(--accent-color);" +
               "        }" +
               "        .btn-accent:hover {" +
               "            background-color: #e0a800;" +
               "        }" +
               "        .api-list {" +
               "            background: white;" +
               "            border-radius: 8px;" +
               "            box-shadow: 0 2px 10px rgba(0,0,0,0.1);" +
               "            padding: 20px;" +
               "            margin-top: 30px;" +
               "        }" +
               "        .api-list h2 {" +
               "            color: var(--primary-color);" +
               "            margin-bottom: 15px;" +
               "            border-bottom: 2px solid var(--light-color);" +
               "            padding-bottom: 10px;" +
               "        }" +
               "        .api-list ul {" +
               "            list-style-type: none;" +
               "        }" +
               "        .api-list li {" +
               "            margin-bottom: 10px;" +
               "            padding: 10px;" +
               "            border-radius: 4px;" +
               "            background-color: var(--light-color);" +
               "        }" +
               "        .api-list a {" +
               "            color: var(--primary-color);" +
               "            text-decoration: none;" +
               "            display: block;" +
               "        }" +
               "        .api-list a:hover {" +
               "            text-decoration: underline;" +
               "        }" +
               "        footer {" +
               "            text-align: center;" +
               "            margin-top: 50px;" +
               "            padding: 20px;" +
               "            color: #666;" +
               "            font-size: 0.9rem;" +
               "        }" +
               "    </style>" +
               "</head>" +
               "<body>" +
               "    <header>" +
               "        <div class='container'>" +
               "            <h1>校园互助系统</h1>" +
               "            <p class='subtitle'>连接校园，互助共赢</p>" +
               "        </div>" +
               "    </header>" +
               "    <div class='container'>" +
               "        <div class='card-container'>" +
               "            <div class='card'>" +
               "                <h2>用户服务</h2>" +
               "                <div class='card-content'>" +
               "                    <p>提供用户注册、登录和信息查询功能。</p>" +
               "                </div>" +
               "                <a href='/campus-help/user.html' class='btn'>用户服务中心</a>" +
               "            </div>" +
               "            <div class='card'>" +
               "                <h2>任务管理</h2>" +
               "                <div class='card-content'>" +
               "                    <p>浏览、发布、接受和完成校园互助任务。</p>" +
               "                </div>" +
               "                <a href='/campus-help/tasks.html' class='btn btn-secondary'>所有任务</a>" +
               "            </div>" +
               "            <div class='card'>" +
               "                <h2>系统状态</h2>" +
               "                <div class='card-content'>" +
               "                    <p>查看系统运行状态和健康信息。</p>" +
               "                </div>" +
               "                <a href='/campus-help/actuator/health' class='btn btn-accent'>健康检查</a>" +
               "            </div>" +
               "        </div>" +
               "        <div class='api-list'>" +
               "            <h2>API接口列表</h2>" +
               "            <ul>" +
               "                <li><a href='/campus-help/api/users/exists/20210001'>检查用户是否存在 - GET /api/users/exists/{studentId}</a></li>" +
               "                <li><a href='/campus-help/api/tasks/list'>查看所有任务 - GET /api/tasks/list</a></li>" +
               "                <li><a href='/campus-help/api/tasks/list/pending'>查看待接受任务 - GET /api/tasks/list/pending</a></li>" +
               "                <li><a href='/campus-help/actuator/health'>系统健康状态 - GET /actuator/health</a></li>" +
               "            </ul>" +
               "        </div>" +
               "        <footer>" +
               "            <p>校园互助系统 &copy; 2025 | 详细API文档请参考README.md</p>" +
               "        </footer>" +
               "    </div>" +
               "</body>" +
               "</html>";
    }
    
    /**
     * 处理/error路径的访问
     * @return 错误信息
     */
    @GetMapping("/error")
    @ResponseBody
    public String error() {
        return "<h1>出错了</h1>" +
               "<p>您访问的页面不存在或发生了错误</p>" +
               "<p><a href='/campus-help/'>返回首页</a></p>";
    }
    
    /**
     * 任务管理页面
     * @return 任务管理页面HTML
     */
    @GetMapping("/tasks")
    @ResponseBody
    public String tasks() {
        return "<!DOCTYPE html>" +
               "<html lang='zh-CN'>" +
               "<head>" +
               "    <meta charset='UTF-8'>" +
               "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>" +
               "    <title>任务管理 - 校园互助系统</title>" +
               "    <style>" +
               "        :root {" +
               "            --primary-color: #4285f4;" +
               "            --secondary-color: #34a853;" +
               "            --accent-color: #fbbc05;" +
               "            --danger-color: #ea4335;" +
               "            --light-color: #f8f9fa;" +
               "            --dark-color: #202124;" +
               "        }" +
               "        * { margin: 0; padding: 0; box-sizing: border-box; }" +
               "        body {" +
               "            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" +
               "            line-height: 1.6;" +
               "            color: var(--dark-color);" +
               "            background-color: #f5f5f5;" +
               "            padding: 0;" +
               "            margin: 0;" +
               "        }" +
               "        .container {" +
               "            max-width: 1200px;" +
               "            margin: 0 auto;" +
               "            padding: 20px;" +
               "        }" +
               "        header {" +
               "            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));" +
               "            color: white;" +
               "            padding: 2rem 0;" +
               "            text-align: center;" +
               "            box-shadow: 0 4px 6px rgba(0,0,0,0.1);" +
               "        }" +
               "        h1 {" +
               "            font-size: 2.5rem;" +
               "            margin-bottom: 0.5rem;" +
               "        }" +
               "        .subtitle {" +
               "            font-size: 1.2rem;" +
               "            opacity: 0.9;" +
               "        }" +
               "        .nav {" +
               "            display: flex;" +
               "            justify-content: center;" +
               "            background-color: white;" +
               "            padding: 10px 0;" +
               "            box-shadow: 0 2px 4px rgba(0,0,0,0.1);" +
               "        }" +
               "        .nav a {" +
               "            color: var(--dark-color);" +
               "            text-decoration: none;" +
               "            padding: 8px 16px;" +
               "            margin: 0 5px;" +
               "            border-radius: 4px;" +
               "            transition: background-color 0.3s;" +
               "        }" +
               "        .nav a:hover, .nav a.active {" +
               "            background-color: var(--light-color);" +
               "            color: var(--primary-color);" +
               "        }" +
               "        .nav a.active {" +
               "            font-weight: bold;" +
               "        }" +
               "        .task-container {" +
               "            margin-top: 30px;" +
               "        }" +
               "        .task-header {" +
               "            display: flex;" +
               "            justify-content: space-between;" +
               "            align-items: center;" +
               "            margin-bottom: 20px;" +
               "        }" +
               "        .task-header h2 {" +
               "            color: var(--primary-color);" +
               "        }" +
               "        .btn {" +
               "            display: inline-block;" +
               "            background-color: var(--primary-color);" +
               "            color: white;" +
               "            padding: 8px 16px;" +
               "            border-radius: 4px;" +
               "            text-decoration: none;" +
               "            transition: background-color 0.3s ease;" +
               "            border: none;" +
               "            cursor: pointer;" +
               "        }" +
               "        .btn:hover {" +
               "            background-color: #3367d6;" +
               "        }" +
               "        .btn-secondary {" +
               "            background-color: var(--secondary-color);" +
               "        }" +
               "        .btn-secondary:hover {" +
               "            background-color: #2d9047;" +
               "        }" +
               "        .btn-accent {" +
               "            background-color: var(--accent-color);" +
               "        }" +
               "        .btn-accent:hover {" +
               "            background-color: #e0a800;" +
               "        }" +
               "        .task-list {" +
               "            background: white;" +
               "            border-radius: 8px;" +
               "            box-shadow: 0 2px 10px rgba(0,0,0,0.1);" +
               "            overflow: hidden;" +
               "        }" +
               "        .task-item {" +
               "            padding: 15px 20px;" +
               "            border-bottom: 1px solid var(--light-color);" +
               "            transition: background-color 0.3s;" +
               "        }" +
               "        .task-item:last-child {" +
               "            border-bottom: none;" +
               "        }" +
               "        .task-item:hover {" +
               "            background-color: var(--light-color);" +
               "        }" +
               "        .task-title {" +
               "            font-weight: bold;" +
               "            color: var(--primary-color);" +
               "            margin-bottom: 5px;" +
               "            font-size: 1.1rem;" +
               "        }" +
               "        .task-description {" +
               "            color: #666;" +
               "            margin-bottom: 10px;" +
               "        }" +
               "        .task-meta {" +
               "            display: flex;" +
               "            justify-content: space-between;" +
               "            font-size: 0.9rem;" +
               "            color: #888;" +
               "        }" +
               "        .task-status {" +
               "            display: inline-block;" +
               "            padding: 3px 8px;" +
               "            border-radius: 12px;" +
               "            font-size: 0.8rem;" +
               "            font-weight: bold;" +
               "        }" +
               "        .status-pending {" +
               "            background-color: #e8f0fe;" +
               "            color: var(--primary-color);" +
               "        }" +
               "        .status-accepted {" +
               "            background-color: #e6f4ea;" +
               "            color: var(--secondary-color);" +
               "        }" +
               "        .status-completed {" +
               "            background-color: #fef7e0;" +
               "            color: var(--accent-color);" +
               "        }" +
               "        .task-actions {" +
               "            margin-top: 10px;" +
               "        }" +
               "        .task-actions .btn {" +
               "            padding: 4px 8px;" +
               "            font-size: 0.9rem;" +
               "            margin-right: 5px;" +
               "        }" +
               "        .empty-state {" +
               "            text-align: center;" +
               "            padding: 40px 20px;" +
               "            color: #888;" +
               "        }" +
               "        .empty-state i {" +
               "            font-size: 3rem;" +
               "            margin-bottom: 10px;" +
               "            color: #ddd;" +
               "        }" +
               "        footer {" +
               "            text-align: center;" +
               "            margin-top: 50px;" +
               "            padding: 20px;" +
               "            color: #666;" +
               "            font-size: 0.9rem;" +
               "        }" +
               "        #task-loading {" +
               "            text-align: center;" +
               "            padding: 20px;" +
               "        }" +
               "        .loading-spinner {" +
               "            display: inline-block;" +
               "            width: 40px;" +
               "            height: 40px;" +
               "            border: 4px solid rgba(0, 0, 0, 0.1);" +
               "            border-radius: 50%;" +
               "            border-top-color: var(--primary-color);" +
               "            animation: spin 1s ease-in-out infinite;" +
               "        }" +
               "        @keyframes spin {" +
               "            to { transform: rotate(360deg); }" +
               "        }" +
               "        /* 模态框样式 */" +
               "        .modal {" +
               "            display: none;" +
               "            position: fixed;" +
               "            z-index: 1000;" +
               "            left: 0;" +
               "            top: 0;" +
               "            width: 100%;" +
               "            height: 100%;" +
               "            background-color: rgba(0,0,0,0.5);" +
               "        }" +
               "        .modal-content {" +
               "            background-color: white;" +
               "            margin: 10% auto;" +
               "            padding: 0;" +
               "            width: 50%;" +
               "            max-width: 600px;" +
               "            border-radius: 8px;" +
               "            box-shadow: 0 5px 15px rgba(0,0,0,0.3);" +
               "            animation: modalFadeIn 0.3s;" +
               "        }" +
               "        @keyframes modalFadeIn {" +
               "            from { opacity: 0; transform: translateY(-50px); }" +
               "            to { opacity: 1; transform: translateY(0); }" +
               "        }" +
               "        .modal-header {" +
               "            display: flex;" +
               "            justify-content: space-between;" +
               "            align-items: center;" +
               "            padding: 15px 20px;" +
               "            border-bottom: 1px solid #eee;" +
               "        }" +
               "        .modal-header h3 {" +
               "            margin: 0;" +
               "            color: var(--primary-color);" +
               "        }" +
               "        .close {" +
               "            font-size: 28px;" +
               "            font-weight: bold;" +
               "            color: #aaa;" +
               "            cursor: pointer;" +
               "        }" +
               "        .close:hover {" +
               "            color: var(--danger-color);" +
               "        }" +
               "        .modal-body {" +
               "            padding: 20px;" +
               "        }" +
               "        .form-group {" +
               "            margin-bottom: 15px;" +
               "        }" +
               "        .form-group label {" +
               "            display: block;" +
               "            margin-bottom: 5px;" +
               "            font-weight: 500;" +
               "        }" +
               "        .form-group input, .form-group textarea {" +
               "            width: 100%;" +
               "            padding: 8px 12px;" +
               "            border: 1px solid #ddd;" +
               "            border-radius: 4px;" +
               "            font-size: 16px;" +
               "        }" +
               "        .form-group input:focus, .form-group textarea:focus {" +
               "            border-color: var(--primary-color);" +
               "            outline: none;" +
               "            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);" +
               "        }" +
               "        .form-actions {" +
               "            display: flex;" +
               "            justify-content: flex-end;" +
               "            gap: 10px;" +
               "            margin-top: 20px;" +
               "        }" +
               "        .btn-cancel {" +
               "            background-color: #f1f1f1;" +
               "            color: #333;" +
               "        }" +
               "        .btn-cancel:hover {" +
               "            background-color: #e0e0e0;" +
               "        }" +
               "        .btn-primary {" +
               "            background-color: var(--primary-color);" +
               "            color: white;" +
               "        }" +
               "        .btn-primary:hover {" +
               "            background-color: #3367d6;" +
               "        }" +
               "    </style>" +
               "</head>" +
               "<body>" +
               "    <header>" +
               "        <div class='container'>" +
               "            <h1>任务管理</h1>" +
               "            <p class='subtitle'>浏览、发布、接受和完成校园互助任务</p>" +
               "        </div>" +
               "    </header>" +
               "    <div class='nav'>" +
               "        <a href='/campus-help/' class='nav-link'>首页</a>" +
               "        <a href='/campus-help/tasks' class='nav-link active'>任务管理</a>" +
               "        <a href='/campus-help/actuator/health' class='nav-link'>系统状态</a>" +
               "    </div>" +
               "    <div class='container'>" +
               "        <div class='task-container'>" +
               "            <div class='task-header'>" +
               "                <h2>所有任务</h2>" +
               "                <div>" +
               "                    <button id='refresh-btn' class='btn'>刷新列表</button>" +
               "                    <button id='open-publish-modal' class='btn btn-secondary'>发布任务</button>" +
               "                </div>" +
               "            </div>" +
               "            <div id='task-list' class='task-list'>" +
               "                <div id='task-loading'>" +
               "                    <div class='loading-spinner'></div>" +
               "                    <p>正在加载任务...</p>" +
               "                </div>" +
               "            </div>" +
               "        </div>" +
               "        <footer>" +
               "            <p>校园互助系统 &copy; 2025 | <a href='/campus-help/'>返回首页</a></p>" +
               "        </footer>" +
               "    </div>" +
               "    <!-- 发布任务模态框 -->" +
               "    <div id='publish-modal' class='modal'>" +
               "        <div class='modal-content'>" +
               "            <div class='modal-header'>" +
               "                <h3>发布新任务</h3>" +
               "                <span class='close'>&times;</span>" +
               "            </div>" +
               "            <div class='modal-body'>" +
               "                <form id='publish-task-form'>" +
               "                    <div class='form-group'>" +
               "                        <label for='task-title'>任务标题</label>" +
               "                        <input type='text' id='task-title' name='title' required>" +
               "                    </div>" +
               "                    <div class='form-group'>" +
               "                        <label for='task-description'>任务描述</label>" +
               "                        <textarea id='task-description' name='description' rows='4' required></textarea>" +
               "                    </div>" +
               "                    <div class='form-group'>" +
               "                        <label for='task-reward'>报酬 (元)</label>" +
               "                        <input type='number' id='task-reward' name='reward' min='0' step='0.01' required>" +
               "                    </div>" +
               "                    <div class='form-group'>" +
               "                        <label for='task-deadline'>截止时间</label>" +
               "                        <input type='datetime-local' id='task-deadline' name='deadline' required>" +
               "                    </div>" +
               "                    <div class='form-group'>" +
               "                        <label for='publisher-id'>发布者学号</label>" +
               "                        <input type='text' id='publisher-id' name='publisherId' required>" +
               "                    </div>" +
               "                    <div class='form-actions'>" +
               "                        <button type='button' class='btn btn-cancel' id='cancel-publish'>取消</button>" +
               "                        <button type='submit' class='btn btn-primary'>发布任务</button>" +
               "                    </div>" +
               "                </form>" +
               "            </div>" +
               "        </div>" +
               "    </div>" +
               "    <script>" +
               "        // 预设的示例任务数据" +
               "        const sampleTasks = [" +
               "            {" +
               "                id: 'TASK001'," +
               "                title: '帮忙取快递'," +
               "                description: '帮忙到校门口快递站取一个小型包裹，送到学生公寓3号楼502室'," +
               "                deadline: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)," +
               "                reward: 10.00," +
               "                status: 'PENDING'," +
               "                publisherId: '2023001'," +
               "                createTime: new Date()," +
               "                updateTime: new Date()" +
               "            }," +
               "            {" +
               "                id: 'TASK002'," +
               "                title: '寻找共享单车'," +
               "                description: '帮忙在校园内找一辆可用的共享单车，并将其停放在图书馆门口'," +
               "                deadline: new Date(new Date().getTime() + 12 * 60 * 60 * 1000)," +
               "                reward: 5.00," +
               "                status: 'ACCEPTED'," +
               "                publisherId: '2023002'," +
               "                acceptorId: '2023005'," +
               "                createTime: new Date(new Date().getTime() - 2 * 60 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 1 * 60 * 60 * 1000)" +
               "            }," +
               "            {" +
               "                id: 'TASK003'," +
               "                title: '笔记整理'," +
               "                description: '帮忙整理高等数学课程的笔记，要求字迹工整，内容完整'," +
               "                deadline: new Date(new Date().getTime() + 3 * 24 * 60 * 60 * 1000)," +
               "                reward: 50.00," +
               "                status: 'COMPLETED'," +
               "                publisherId: '2023003'," +
               "                acceptorId: '2023006'," +
               "                createTime: new Date(new Date().getTime() - 5 * 24 * 60 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)" +
               "            }," +
               "            {" +
               "                id: 'TASK004'," +
               "                title: '食堂代购'," +
               "                description: '帮忙在第一食堂购买两份套餐，送到计算机学院实验室'," +
               "                deadline: new Date(new Date().getTime() + 3 * 60 * 60 * 1000)," +
               "                reward: 15.00," +
               "                status: 'PENDING'," +
               "                publisherId: '2023007'," +
               "                createTime: new Date(new Date().getTime() - 30 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 30 * 60 * 1000)" +
               "            }," +
               "            {" +
               "                id: 'TASK005'," +
               "                title: '图书馆占座'," +
               "                description: '明天上午8点在图书馆三楼自习区帮忙占两个相邻的座位'," +
               "                deadline: new Date(new Date().getTime() + 18 * 60 * 60 * 1000)," +
               "                reward: 20.00," +
               "                status: 'PENDING'," +
               "                publisherId: '2023008'," +
               "                createTime: new Date(new Date().getTime() - 4 * 60 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 4 * 60 * 60 * 1000)" +
               "            }," +
               "            {" +
               "                id: 'TASK006'," +
               "                title: '课程PPT分享'," +
               "                description: '寻找计算机网络课程的完整PPT资料，需包含本学期所有章节'," +
               "                deadline: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000)," +
               "                reward: 30.00," +
               "                status: 'ACCEPTED'," +
               "                publisherId: '2023009'," +
               "                acceptorId: '2023010'," +
               "                createTime: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 2 * 24 * 60 * 60 * 1000)" +
               "            }," +
               "            {" +
               "                id: 'TASK007'," +
               "                title: '活动海报设计'," +
               "                description: '为学生会举办的校园歌手大赛设计宣传海报，需要在两天内完成'," +
               "                deadline: new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000)," +
               "                reward: 100.00," +
               "                status: 'PENDING'," +
               "                publisherId: '2023011'," +
               "                createTime: new Date(new Date().getTime() - 12 * 60 * 60 * 1000)," +
               "                updateTime: new Date(new Date().getTime() - 12 * 60 * 60 * 1000)" +
               "            }" +
               "        ];" +
               "        " +
               "        // 页面加载完成后获取任务列表" +
               "        document.addEventListener('DOMContentLoaded', function() {" +
               "            fetchTasks();" +
               "            " +
               "            // 刷新按钮点击事件" +
               "            document.getElementById('refresh-btn').addEventListener('click', function() {" +
               "                fetchTasks();" +
               "            });" +
               "            " +
               "            // 打开发布任务模态框" +
               "            document.getElementById('open-publish-modal').addEventListener('click', function() {" +
               "                document.getElementById('publish-modal').style.display = 'block';" +
               "                // 设置默认截止时间为明天" +
               "                const tomorrow = new Date();" +
               "                tomorrow.setDate(tomorrow.getDate() + 1);" +
               "                tomorrow.setHours(23, 59);" +
               "                document.getElementById('task-deadline').value = tomorrow.toISOString().slice(0, 16);" +
               "            });" +
               "            " +
               "            // 关闭模态框" +
               "            document.querySelector('.close').addEventListener('click', function() {" +
               "                document.getElementById('publish-modal').style.display = 'none';" +
               "            });" +
               "            " +
               "            document.getElementById('cancel-publish').addEventListener('click', function() {" +
               "                document.getElementById('publish-modal').style.display = 'none';" +
               "            });" +
               "            " +
               "            // 点击模态框外部关闭" +
               "            window.addEventListener('click', function(event) {" +
               "                if (event.target == document.getElementById('publish-modal')) {" +
               "                    document.getElementById('publish-modal').style.display = 'none';" +
               "                }" +
               "            });" +
               "            " +
               "            // 发布任务表单提交" +
               "            document.getElementById('publish-task-form').addEventListener('submit', function(e) {" +
               "                e.preventDefault();" +
               "                " +
               "                const formData = {" +
               "                    title: document.getElementById('task-title').value," +
               "                    description: document.getElementById('task-description').value," +
               "                    reward: parseFloat(document.getElementById('task-reward').value)," +
               "                    deadline: new Date(document.getElementById('task-deadline').value).toISOString()" +
               "                };" +
               "                " +
               "                const publisherId = document.getElementById('publisher-id').value;" +
               "                " +
               "                // 发送请求到API" +
               "                fetch('/campus-help/api/tasks/publish', {" +
               "                    method: 'POST'," +
               "                    headers: {" +
               "                        'Content-Type': 'application/json'," +
               "                        'Publisher-Id': publisherId" +
               "                    }," +
               "                    body: JSON.stringify(formData)" +
               "                })" +
               "                .then(response => response.json())" +
               "                .then(data => {" +
               "                    if (data.success) {" +
               "                        alert('任务发布成功！');" +
               "                        document.getElementById('publish-modal').style.display = 'none';" +
               "                        document.getElementById('publish-task-form').reset();" +
               "                        fetchTasks();" +
               "                    } else {" +
               "                        alert('发布失败: ' + data.message);" +
               "                    }" +
               "                })" +
               "                .catch(error => {" +
               "                    console.error('Error:', error);" +
               "                    alert('发布失败，请稍后再试');" +
               "                });" +
               "            });" +
               "        });" +
               "        " +
               "        // 获取任务列表" +
               "        function fetchTasks() {" +
               "            const taskList = document.getElementById('task-list');" +
               "            taskList.innerHTML = '<div id=\"task-loading\"><div class=\"loading-spinner\"></div><p>正在加载任务...</p></div>';" +
               "            " +
               "            console.log('开始获取任务列表...');" +
               "            const baseUrl = window.location.protocol + '//' + window.location.host;" +
               "            const apiUrl = baseUrl + '/campus-help/api/tasks/list';" +
               "            console.log('请求API地址:', apiUrl);" +
               "            fetch(apiUrl)" +
               "                .then(response => {" +
               "                    console.log('API响应状态:', response.status);" +
               "                    return response.json();" +
               "                })" +
               "                .then(data => {" +
               "                    console.log('获取到的数据:', data);" +
               "                    if (data.success) {" +
               "                        displayTasks(data.data);" +
               "                    } else {" +
               "                        showError(data.message);" +
               "                    }" +
               "                })" +
               "                .catch(error => {" +
               "                    console.error('获取任务列表出错:', error);" +
               "                    showError('获取任务列表失败，请检查API是否正常工作');" +
               "                    // 仅在开发环境下使用示例数据" +
               "                    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {" +
               "                        console.log('使用示例任务数据进行展示');" +
               "                        displayTasks(sampleTasks);" +
               "                    }" +
               "                });" +
               "        };" +
               "        " +
               "        // 显示任务列表" +
               "        function displayTasks(tasks) {" +
               "            const taskList = document.getElementById('task-list');" +
               "            taskList.innerHTML = '';" +
               "            if (!Array.isArray(tasks)) {" +
               "                showError('任务数据格式错误');" +
               "                console.error('任务数据不是数组:', tasks);" +
               "                return;" +
               "            }" +
               "            if (tasks.length === 0) {" +
               "                taskList.innerHTML = '<div class=\"empty-state\"><div>X</div><p>暂无任务</p><p>点击\"发布任务\"按钮创建新任务</p></div>';" +
               "                return;" +
               "            }" +
               "            tasks.forEach(task => {" +
               "                try {" +
               "                    const taskItem = document.createElement('div');" +
               "                    taskItem.className = 'task-item';" +
               "                    let statusClass = 'status-pending';" +
               "                    let statusText = '待接受';" +
               "                    if (task.status === 'ACCEPTED') {" +
               "                        statusClass = 'status-accepted';" +
               "                        statusText = '进行中';" +
               "                    } else if (task.status === 'COMPLETED') {" +
               "                        statusClass = 'status-completed';" +
               "                        statusText = '已完成';" +
               "                    }" +
               "                    let deadline = new Date(task.deadline && typeof task.deadline === 'string' ? task.deadline.replace('T', ' ').replace(/-/g, '/') : task.deadline);" +
               "                    let formattedDeadline;" +
               "                    if (isNaN(deadline.getTime())) {" +
               "                        formattedDeadline = task.deadline || '';" +
               "                    } else {" +
               "                        formattedDeadline = deadline.toLocaleDateString('zh-CN') + ' ' + deadline.toLocaleTimeString('zh-CN', {hour: '2-digit', minute:'2-digit'});" +
               "                    }" +
               "                    taskItem.innerHTML = `" +
               "                        <div class='task-title'>${task.title}</div>" +
               "                        <div class='task-description'>${task.description}</div>" +
               "                        <div class='task-meta'>" +
               "                            <span>报酬: ¥${task.reward}</span>" +
               "                            <span>截止时间: ${formattedDeadline}</span>" +
               "                            <span class='task-status ${statusClass}'>${statusText}</span>" +
               "                        </div>" +
               "                        <div class='task-actions'>" +
               "                            <button class='btn' onclick='viewTaskDetail(\"${task.id}\")'>查看详情</button>" +
               "                        </div>" +
               "                    `;" +
               "                    taskList.appendChild(taskItem);" +
               "                } catch (e) {" +
               "                    showError('渲染任务时出错: ' + e.message);" +
               "                    console.error('渲染单个任务出错:', e, task);" +
               "                }" +
               "            });" +
               "        }" +
               "        " +
               "        // 显示错误信息" +
               "        function showError(message) {" +
               "            const taskList = document.getElementById('task-list');" +
               "            taskList.innerHTML = `<div class=\"empty-state\"><div>X</div><p>${message}</p></div>`;" +
               "        }" +
               "        " +
               "        // 查看任务详情" +
               "        function viewTaskDetail(taskId) {" +
               "            alert('任务详情功能正在开发中，任务ID: ' + taskId);" +
               "            // 实际项目中可以跳转到任务详情页面" +
               "            // window.location.href = '/campus-help/tasks/' + taskId;" +
               "        }" +
               "    </script>" +
               "</body>" +
               "</html>";
    }
}